<template>
    <div>
        <div class="content">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="">
                    <div> <img  v-if="active == 0" class="img" :src="require('@/assets/img/1.png')" alt="">
                        <img  v-else class="img" :src="require('@/assets/img/6.png')" alt="">
                    </div>
                    <div :class="{'name':active == 0}"  class="names">数据</div>
                </van-tabbar-item>
                <van-tabbar-item icon="">
                    <div> <img   v-if="active == 1" class="img" :src="require('@/assets/img/2.png')" alt="">
                        <img v-else class="img" :src="require('@/assets/img/7.png')" alt="">
                    </div>
                    <div :class="{'name':active == 1}" class="names">管理</div>
                </van-tabbar-item>
                <van-tabbar-item  style="position:relative" icon="">
                    <div class="scodeBg"> <img   class="imgs" :src="require('@/assets/img/3.png')" alt=""></div>
                </van-tabbar-item>
                <van-tabbar-item icon="">
                    <div> <img v-if="active == 3" class="img" :src="require('@/assets/img/4.png')" alt="">
                        <img v-else class="img" :src="require('@/assets/img/8.png')" alt="">
                    </div>
                    <div :class="{'name':active == 3}" class="names">新功能</div>
                </van-tabbar-item>
                <van-tabbar-item icon="">
                    <div> <img  v-if="active == 4" class="img" :src="require('@/assets/img/5.png')" alt="">
                        <img  v-else class="img" :src="require('@/assets/img/9.png')" alt="">
                    </div>
                    <div :class="{'name':active == 4}" class="names">个人中心</div>
                </van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>
  
<script>

export default {
    data() {
        return {
            active: 0,
        };
    },
    created() { },
    mounted() {


    },
    watch: {
    },
    methods: {

    },

};
</script>
  
<style scoped>
.content {
    position: relative;
    height: 100vh;
    background: #F4F3F8;
}

.scan {
    position: absolute;
    bottom: 35px;
    left: 50%;
    z-index: 99;
    transform: translate(-50%);
}

::v-deep .van-tabbar-item {
    font-size: .3rem;
    text-align: center;
    color: #ccc;
    
}

::v-deep .van-tabbar {
    height: 1.4rem;
}

.img {
    width: .575rem;
    height: .575rem;
}

.name {
    margin-top: .1rem;
    text-align: center;
    color: #34C8E8;
}
.names {
    margin-top: .1rem;
    text-align: center;
}
.scodeBg {
    z-index: 9999;
    position: absolute;
    top: -.7rem;
    left: 50%;
    transform: translate(-50%);
    width: 1.875rem;
    height: 1.875rem;
    background: #fff;
    border-radius:50% ;
}
.imgs {
    margin-top: .2125rem;
    width: 1.445rem;
    height: 1.445rem;
}
</style>